<template>
  <view class="imgBox">
    <view v-if="props.imgList.length == 0" class="empty">
      <image :src="empty" mode="widthFix" />
    </view>
    <scroll-view scroll-y :refresher-enabled="pull" refresher-background="rgba(0,0,0,0)" class="scroll"
      refresher-default-style="white" @refresherrefresh="refreshEvent" :refresher-triggered="refresher"
      @scrolltolower="scrolltolowerEvent" :lower-threshold="300" @scroll="scrollEvent">
      <view class="imgs" :style="{ 'grid-template-columns': `repeat(${pc ? 1 : 2}, 1fr)` }">
        <view v-for="(i, index) in imgList" :style="{ height: `${pc ? 450 : 600}rpx` }" :key="index" class="item"
          @longpress="i.tool = true">
          <image :lazy-load="true" :src="i.small" mode="aspectFill" @click="previewImage(i)" />
          <view class="tag" v-if="!i.tool && i.tag">{{ i.tag }}</view>
          <view class="tools" v-if="i.tool">
            <view class="tool" @click="toolEvent(i, 0)">
              <image :src="share" mode="scaleToFill" />
            </view>
            <view class="tool" @click="toolEvent(i, 1)">
              <image :src="down" mode="scaleToFill" />
            </view>
            <view class="tool" v-if="props.type != 1" @click="toolEvent(i, 2)">
              <image :src="col" mode="scaleToFill" />
            </view>
            <view class="tool" v-if="props.type != 0" @click="toolEvent(i, 3)">
              <image :src="del" mode="scaleToFill" />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import empty from '@/static/images/empty.png'
import col from '@/static/images/col.png'
import share from '@/static/images/share.png'
import down from '@/static/images/down.png'
import del from '@/static/images/del.png'
import { useImgInfoStore } from '@/stores/index'
const imgInfoStore = useImgInfoStore()
const $emits = defineEmits(['scrolltolower', 'deleteImg', 'refreshEvent'])
const props = defineProps({
  imgList: {
    type: Array as any,
    default: []
  },
  type: {
    type: Number,
    default: 0 // 0: 默认 1: 收藏 2: 历史
  },
  pc: {
    type: Boolean,
    default: false
  },
  pull: {
    type: Boolean,
    default: true
  }
})
const scrollTop = ref(0)
const scrolltolowerEvent = () => {
  $emits('scrolltolower')
}
const refresher = ref(false)
const refreshEvent = () => {
  refresher.value = true
  $emits('refreshEvent')
  setTimeout(() => {
    refresher.value = false
  }, 500)
}
const previewImage = (e: any) => {
  if (e.tool) return e.tool = false
  imgInfoStore.addHistory({
    src: e.src,
    small: e.small,
    tag: e.tag
  })
  uni.previewImage({
    current: e.src,
    urls: props.imgList.map((i: any) => i.src),
    longPressActions: {
      itemList: ['关闭图片预览'],
      success: function (data) {
        uni.closePreviewImage()
      },
      fail: function (err) {
        // 关闭图片预览
      },
    },

  })
}
const scrollEvent = (e: any) => {
  scrollTop.value = e.detail.scrollTop
}

const toolEvent = (item: any, index: number) => {
  item.tool = false
  if (index == 0) {
    // 复制地址到剪切板
    uni.setClipboardData({
      data: item.src,
      success: function () {
        uni.showToast({
          title: '复制成功',
          icon: 'success',
          duration: 1000
        });
      },
      fail: function (err) {
        console.log(err.errMsg);
      }
    })
  }
  if (index == 1) {
    uni.saveImageToPhotosAlbum({
      filePath: item.src,
      success: () => {
        uni.showToast({
          title: '下载成功',
          icon: 'success',
          duration: 1000
        })
      },
      fail: () => {
        uni.showToast({
          title: '下载失败',
          icon: 'error',
          duration: 1000
        })
      },
    })
  }
  if (index == 2) {
    imgInfoStore.addCollection({
      src: item.src,
      small: item.small,
      tag: item.tag
    })
    uni.showToast({
      title: '收藏成功',
      icon: 'success',
      duration: 1000
    })
  }
  if (index == 3) {
    $emits('deleteImg', item.src)
  }
}
</script>

<style scoped lang="scss">
.imgBox {
  height: 100%;
  overflow: auto;
}

.empty {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;

  image {
    width: 200rpx;
  }
}

.scroll {
  width: 100%;
  height: 100%;
  padding: 10rpx;
  display: flex;
  gap: 5px;

  .imgs {
    display: grid;
    gap: 4px;

    .item {
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      background-color: #f0f8ff40;
      box-shadow: 0.3em 0.3em 0.7em var(--shadow);
      transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      background: url('@/static/images/loading.gif') no-repeat center center;
      background-size: 35px auto;
      border-bottom: 1px solid var(--borderColor);

      .tag {
        width: 100%;
        padding: 5rpx 10rpx;
        background-color: #0000001e;
        position: absolute;
        z-index: 10;
        left: 0;
        bottom: 0;
        color: white;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tools {
        width: 100%;
        padding: 10rpx;
        position: absolute;
        z-index: 10;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-around;
        background-color: #0000001e;

        .tool {
          border-radius: 50%;
          box-shadow: 0em 0em 0.3em #fefefea9;

          image {
            width: 30px;
            height: 30px;
          }
        }
      }
    }
  }

  :deep(.uni-scroll-view) {
    margin-bottom: 102px;
  }

  :deep(.uni-scroll-view-refresh__spinner) {
    circle {
      color: #0073ff !important;
    }
  }

  :deep(.uni-scroll-view-refresh-inner) {
    svg {
      fill: #0073ff !important;
    }
  }
}
</style>